<template>
  <div class="qf-info-container">
    <UploadFile
      v-if="showEdit"
      @imgData="handerImgData"
      :files="form.fileUrl"
    >
    </UploadFile>
    <div
      class="qf-image__lazy"
      v-else
    >
      <el-image
        style="width: 178px; height: 178px;"
        :src="form.fileUrl"
        :preview-src-list="[form.fileUrl]"
        :lazy="false"
      >
        <div
          slot="error"
          class="image-slot"
        >
          <img
            style="width:100%; height: 100%"
            src="@/assets/images/errorImage.png"
          />
        </div>
      </el-image>
    </div>
    <div>
      <component
        ref="cp"
        :is="cname"
        :showEdit="showEdit"
        :subForm="subForm"
        :vf="isVf"
        :add="add"
        @changeForm="changeForm"
      ></component>
    </div>
  </div>
</template>

<script>
export default {
  name: "qf-common",
  components: {
    "qf-business": () => import("./compist/business"),
    "qf-business-licence": () => import("./compist/businessLicence"),
    "qf-second-drug-apparatus-business-licence": () =>
      import("./compist/secondDrugApparatusBusinessLicence"),
    "qf-food-business-licence": () => import("./compist/foodBusinessLicence"),
    "qf-general": () => import("./compist/general"),
  },
  props: {
    cname: {
      type: String,
      default: "",
    },
    add: {
      type: Boolean,
      default: true,
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    subForm: {
      type: Object,
      default: () => {},
    },
    vf: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: "",
    },
  },
  watch: {
    isEdit: {
      handler(val) {
        this.showEdit = val;
      },
      immediate: true,
    },
    vf: {
      handler(val) {
        this.isVf = val;
      },
      immediate: true,
    },
    subForm: {
      handler(val) {
        if (JSON.stringify(val) != "{}") {
          if (!val.fileUrl) {
            val.fileUrl = "";
          }
          this.form = Object.assign({}, this.form, val);
        } else {
          this.form.fileUrl = "";
        }
        if (this.showEdit && this.form.fileUrl) {
          this.isVf = true;
        } else if (this.showEdit && !this.form.fileUrl && !this.vf) {
          this.isVf = false;
        }
      },
      immediate: true,
    },
  },
  created() {},
  data() {
    return {
      form: {
        fileUrl: "",
      },
      showEdit: false,
      isVf: false,
    };
  },
  methods: {
    // 提交的方法
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs.cp
          .submit()
          .then((res) => {
            let formData = Object.assign({}, res);
            formData.fileUrl = this.form.fileUrl;
            if (this.showEdit && this.vf) {
              if (!this.form.fileUrl) {
                reject({
                  code: 110,
                  data: formData,
                  msg: `请上传${this.label}的图片`,
                });
              } else {
                resolve(formData);
              }
            } else {
              resolve(formData);
            }
          })
          .catch((error) => {
            let formData = Object.assign({}, error.data);
            formData.fileUrl = this.form.fileUrl;
            reject({
              code: 110,
              data: formData,
              msg: `${this.label}表单验证失败`,
            });
          });
      });
    },
    // 子组件form表单数据改变
    changeForm(val) {
      this.$emit("changeForm", val);
    },
    // 图片发生改变的效果
    handerImgData(data) {
      // this.imageUrl = data;
      this.form.fileUrl = data;
      this.$refs.cp.form.fileUrl = data;
      if (this.showEdit && data) {
        this.isVf = true;
      } else if (this.showEdit && !this.vf && !data) {
        this.isVf = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.qf-image__lazy {
  width: 200px;
}
.qf-info-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
.image-slot {
  width: 100%;
  height: 100%;
}
</style>
